<template>
  <div ref="imageWrapper">
    <!-- 查询区域 -->
    <div class="search_box">
      <a-form-model ref="form" :model="queryParam" :rules="rules" layout="inline" @keyup.enter.native="searchQuery">
        <a-row>
          <a-col :span="6">
            <a-form-model-item label="" prop="">
              <a-tree-select
                v-model="superParam.warnModelId"
                show-line
                style="width: 100%"
                placeholder="请选择数据模型"
                :dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"
                :tree-data="treeData"
                tree-default-expand-all
                @change="
                  (value, node, extra) => {
                    superParam.modelName = node[0]
                    getSearchAndTitleList(value)
                  }
                "
              >
              </a-tree-select>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
    <a-card :bordered="false">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
        <div>
          <span>自动预警</span>
        </div>
        <div>
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24" type="flex" justify="end">
              <a-col>
                <a-form-item label="模型名称">
                  <a-input v-model="queryParam.warnName" placeholder="请输入" />
                </a-form-item>
              </a-col>
              <a-col>
                <a-form-item label="预警时间">
                  <a-range-picker
                    v-model="queryParam.date"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    @change="handleDatechange"
                  />
                </a-form-item>
              </a-col>
              <a-col>
                <a-button type="primary" @click="searchQuery" icon="search">过滤</a-button>
                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">清除条件</a-button>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <span slot="action" slot-scope="text, record" v-if="dataSource.length">
          <a @click="handleToYD(record)" style="color:red;">转疑点</a>
        </span>
      </a-table>
      <YDModel ref="YDModel" :routerData="$route.path" />
    </a-card>
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import columns from './indexColumns'
import { postAction, getAction } from '@/api/manage'
import moment from 'moment'
import { base64toImg } from '@/mixins/base64toImg'
import YDModel from '@/views/sj/components/YDModel'

export default {
  name: 'ss',
  mixins: [JeecgListMixin, base64toImg],
  components: { YDModel },
  data() {
    return {
      // 表头
      queryParam: {},
      superParam: {
        warnModelId: undefined,
        modelName: undefined
      },
      rules: {
        accYear: [{ required: true, message: '请选择年度' }],
        accStartTime: [{ required: true, message: '请选择开始时间' }],
        accEndTime: [{ required: true, message: '请选择结束时间' }],
        accName: [{ required: true, message: '请选择账套' }]
      },
      columns: columns(this),
      yearPickShow: false,
      dataSource: [],
      treeData: [],
      loading: false,
      url: {
        selectTree: '/dataModel/queryDataModelTemplate?funcType=1,2',
        list: '/warnLog/queryWarnLogInfo'
      },
      disableMixinCreated: true
    }
  },
  computed: {},
  created() {
    this.loadTree()
  },
  watch: {
    $route: {
      handler: function(to) {
        if (Object.keys(to.query).length) {
          this.disableMixinCreated = true
          this.queryParam = Object.assign(this.queryParam, to.query)
          this.queryParam.date = to.query.date.split(',')
          this.superParam.warnModelId = to.query.warnModelId
          this.superParam.modelName = to.query.modelName
          this.$nextTick(() => {
            this.loadData()
          })
        }
      },
      immediate: true
    }
  },
  methods: {
    handleToYD(record) {
      if (this.dataSource.length) {
        let ydnr, time
        if (record) {
          const { deptName = '', warnName = '', warnDesc = '', warnTime = '' } = record
          ydnr = `【预警描述：${warnDesc}】`
          time = `【${deptName}】【${this.superParam.modelName}】【${warnName}】【${warnTime}】`
        } else {
          time = `【${this.superParam.modelName}】`
        }
        const params = {
          ...this.queryParam,
          ...this.superParam
        }
        this.addYd(params, ydnr, time)
      } else {
        this.$message.error('空数据不能新建疑点')
      }
    },
    loadTree() {
      var that = this
      that.treeData = []
      getAction(this.url.selectTree).then(res => {
        if (res.success) {
          //部门全选后，再添加部门，选中数量增多
          this.treeData = this.getTree(res.result, '0')
          this.loading = false
        }
      })
    },
    getTree(treeData, pid) {
      let treeArr = []
      for (let i = 0; i < treeData.length; i++) {
        let node = treeData[i]
        if (node.pid == pid) {
          let newNode = {
            title: node.modelName,
            key: node.id,
            value: node.id,
            children: this.getTree(treeData, node.id)
          }
          treeArr.push(newNode)
        }
      }
      return treeArr
    },
    getSearchAndTitleList(id) {
      this.listData = []
      this.dataSource = []
      this.loadData(1)
    },
    handleDatechange(dates) {
      this.queryParam.warnStartTime = dates[0]
      this.queryParam.warnEndTime = dates[1]
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
.search_box {
  max-width: 16vw;
  // overflow: auto;
  margin-top: 20px;
  height: 0;
  border-width: 0px 15px 38px 0px;
  border-style: none solid solid;
  border-color: transparent transparent orange;
  /deep/ .ant-select-selection {
    min-width: 15vw;
    color: #fff;
    font-size: 18px;
    border: none;
    box-shadow: none;
    background-color: transparent;
    .ant-select-arrow .ant-select-arrow-icon {
      color: #fff;
    }
    .ant-select-selection__placeholder,
    .ant-select-search__field__placeholder {
      color: #fff;
    }
  }
}
</style>